<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Search, Plus, Upload, Download } from '@element-plus/icons-vue'

// 素材库数据
const materials = ref([
  { 
    id: 'SP202311001', 
    uploader: '赵明杰', 
    tags: [{ name: '高品质', type: 'primary' }, { name: '风景', type: 'success' }], 
    createTime: '2023-11-20 15:30:21' 
  },
  { 
    id: 'SP202311002', 
    uploader: '林思敏', 
    tags: [{ name: '动物园', type: 'warning' }, { name: '萌宠', type: 'warning' }], 
    createTime: '2023-11-20 14:25:16' 
  },
  { 
    id: 'SP202311003', 
    uploader: '张云帆', 
    tags: [{ name: '人物照', type: 'danger' }, { name: '写实', type: 'info' }], 
    createTime: '2023-11-20 11:42:53' 
  }
])

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 42891
})

// 搜索关键词
const searchKeyword = ref('')

// 分类选择
const categoryValue = ref('all')
const categoryOptions = [
  { label: '全部分类', value: 'all' },
  { label: '图片素材', value: 'image' },
  { label: '文本素材', value: 'text' },
  { label: '视频素材', value: 'video' }
]

// 处理页码变化
const handleCurrentChange = (val: number) => {
  pagination.currentPage = val
  // 这里可以添加获取对应页数据的逻辑
}

// 处理搜索
const handleSearch = () => {
  console.log('搜索关键词:', searchKeyword.value)
  // 这里可以添加搜索逻辑
}

// 处理新增素材
const handleAddMaterial = () => {
  console.log('新增素材')
  // 这里可以添加新增素材的逻辑
}

// 处理批量导入
const handleBatchImport = () => {
  console.log('批量导入')
  // 这里可以添加批量导入的逻辑
}

// 处理批量导出
const handleBatchExport = () => {
  console.log('批量导出')
  // 这里可以添加批量导出的逻辑
}

// 处理查看素材
const handleViewMaterial = (id: string) => {
  console.log('查看素材:', id)
  // 这里可以添加查看素材的逻辑
}

// 处理删除素材
const handleDeleteMaterial = (id: string) => {
  console.log('删除素材:', id)
  // 这里可以添加删除素材的逻辑
}
</script>

<template>
  <div class="material-library-container">
    <!-- 统计卡片 -->
    <div class="stats-cards">
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-info">
            <h3>今日生成量</h3>
            <div class="stat-value">1,284</div>
            <div class="stat-trend trend-up">
              <el-icon><CaretTop /></el-icon>
              较昨日增长 12.5%
            </div>
          </div>
          <div class="stat-icon" style="background-color: rgba(64, 158, 255, 0.1)">
            <el-icon style="color: #409EFF"><Document /></el-icon>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-info">
            <h3>模型成功率</h3>
            <div class="stat-value">98.6%</div>
            <div class="stat-trend trend-up">
              <el-icon><CaretTop /></el-icon>
              较上周提升 0.8%
            </div>
          </div>
          <div class="stat-icon" style="background-color: rgba(103, 194, 58, 0.1)">
            <el-icon style="color: #67C23A"><Check /></el-icon>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-info">
            <h3>活跃用户数</h3>
            <div class="stat-value">3,721</div>
            <div class="stat-trend trend-up">
              <el-icon><CaretTop /></el-icon>
              较昨日增长 5.2%
            </div>
          </div>
          <div class="stat-icon" style="background-color: rgba(64, 158, 255, 0.1)">
            <el-icon style="color: #409EFF"><User /></el-icon>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-info">
            <h3>素材库总量</h3>
            <div class="stat-value">42,891</div>
            <div class="stat-trend">
              更新于 10 分钟前
            </div>
          </div>
          <div class="stat-icon" style="background-color: rgba(144, 147, 153, 0.1)">
            <el-icon style="color: #909399"><List /></el-icon>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 素材库总览 -->
    <el-card class="material-overview" shadow="hover">
      <template #header>
        <div class="card-header">
          <h3>素材库总览</h3>
        </div>
      </template>
      
      <div class="material-actions">
        <div class="left-actions">
          <el-button type="primary" @click="handleAddMaterial">
            <el-icon><Plus /></el-icon> 新增素材
          </el-button>
          <el-button @click="handleBatchImport">
            <el-icon><Upload /></el-icon> 批量导入
          </el-button>
          <el-button @click="handleBatchExport">
            <el-icon><Download /></el-icon> 批量导出
          </el-button>
        </div>
        <div class="right-actions">
          <el-select v-model="categoryValue" placeholder="全部分类" size="default">
            <el-option 
              v-for="item in categoryOptions" 
              :key="item.value" 
              :label="item.label" 
              :value="item.value" 
            />
          </el-select>
        </div>
      </div>

      <el-table :data="materials" style="width: 100%">
        <el-table-column prop="id" label="素材ID" width="180" />
        <el-table-column prop="uploader" label="上传者" width="180" />
        <el-table-column label="标签">
          <template #default="scope">
            <el-tag 
              v-for="(tag, index) in scope.row.tags" 
              :key="index" 
              :type="tag.type" 
              size="small" 
              class="material-tag"
            >
              {{ tag.name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleViewMaterial(scope.row.id)">查看</el-button>
            <el-button link type="danger" size="small" @click="handleDeleteMaterial(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <span class="total-count">共 {{ pagination.total }} 条记录</span>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="pagination.total"
          :page-size="pagination.pageSize"
          :current-page="pagination.currentPage"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 图表区域 -->
    <div class="chart-container">
      <el-card class="chart-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>生成量趋势</h3>
          </div>
        </template>
        <div class="chart" id="productionTrend"></div>
      </el-card>

      <el-card class="chart-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>模型成功率</h3>
          </div>
        </template>
        <div class="chart" id="modelSuccessRate"></div>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.material-library-container {
  .stats-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;

    .stat-card {
      border-radius: 8px;
      
      .stat-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .stat-info {
          h3 {
            font-size: 14px;
            color: #909399;
            margin: 0 0 10px 0;
            font-weight: normal;
          }
          
          .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
            margin-bottom: 5px;
          }
          
          .stat-trend {
            font-size: 12px;
            color: #909399;
            display: flex;
            align-items: center;
            
            &.trend-up {
              color: #67C23A;
            }
            
            .el-icon {
              margin-right: 4px;
            }
          }
        }
        
        .stat-icon {
          width: 48px;
          height: 48px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          
          .el-icon {
            font-size: 24px;
          }
        }
      }
    }
  }

  .material-overview {
    margin-bottom: 20px;
    border-radius: 8px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      h3 {
        font-size: 16px;
        margin: 0;
        font-weight: 600;
      }
    }
    
    .material-actions {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      
      .left-actions {
        display: flex;
        gap: 10px;
      }
    }
    
    .material-tag {
      margin-right: 5px;
    }
    
    .pagination-container {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .total-count {
        color: #909399;
        font-size: 14px;
      }
    }
  }

  .chart-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    
    .chart-card {
      border-radius: 8px;
      
      .card-header {
        h3 {
          font-size: 16px;
          margin: 0;
          font-weight: 600;
        }
      }
      
      .chart {
        height: 300px;
      }
    }
  }
}
</style>

<script>
import * as echarts from 'echarts'

export default {
  mounted() {
    this.$nextTick(() => {
      // 初始化生成量趋势图表
      const productionTrendChart = echarts.init(document.getElementById('productionTrend'))
      productionTrendChart.setOption({
        xAxis: {
          type: 'category',
          data: ['11-14', '11-15', '11-16', '11-17', '11-18', '11-19', '11-20'],
          axisLine: {
            lineStyle: {
              color: '#E0E6F1'
            }
          },
          axisLabel: {
            color: '#909399'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#EBEEF5'
            }
          },
          axisLabel: {
            color: '#909399'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        series: [
          {
            data: [850, 900, 900, 950, 1250, 1300, 1250],
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              color: '#409EFF',
              width: 3
            },
            itemStyle: {
              color: '#409EFF',
              borderColor: '#fff',
              borderWidth: 2
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(64, 158, 255, 0.3)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(64, 158, 255, 0.1)'
                  }
                ]
              }
            }
          }
        ]
      })
      
      // 初始化模型成功率图表
      const modelSuccessRateChart = echarts.init(document.getElementById('modelSuccessRate'))
      modelSuccessRateChart.setOption({
        xAxis: {
          type: 'category',
          data: ['11-14', '11-15', '11-16', '11-17', '11-18', '11-19', '11-20'],
          axisLine: {
            lineStyle: {
              color: '#E0E6F1'
            }
          },
          axisLabel: {
            color: '#909399'
          }
        },
        yAxis: {
          type: 'value',
          min: 90,
          max: 100,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#EBEEF5'
            }
          },
          axisLabel: {
            color: '#909399'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        series: [
          {
            data: [96, 97, 97.5, 98, 98.2, 98.5, 98.6],
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              color: '#67C23A',
              width: 3
            },
            itemStyle: {
              color: '#67C23A',
              borderColor: '#fff',
              borderWidth: 2
            }
          }
        ]
      })
      
      // 窗口大小变化时重绘图表
      window.addEventListener('resize', () => {
        productionTrendChart.resize()
        modelSuccessRateChart.resize()
      })
    })
  }
}
</script>